<template>

	<main class="zj gridPanel">
		<div class="chartBox w2">
			<h2>报警分类占比</h2>
			<div class="chart" ref="chart2"></div>
		</div>
		<div class="chartBox w2">
			<h2>报警趋势分析</h2>
			<div class="chart" ref="chart1"></div>
		</div>
		<div class="chartBox w2">
			<h2>报警等级占比</h2>
			<div class="chart" ref="chart4"></div>
		</div>
		<div class="chartBox w2">
			<h2>报警分类数量</h2>
			<div class="chart" ref="chart3"></div>
		</div>
	</main>


</template>

<script>

	export default {
		data() {
			return {
				data1: [
					{year: 2016, name: '消防联网远程监控', value: 2154},
					{year: 2016, name: '电气火灾报警', value: 3057},
					{year: 2016, name: '烟感报警', value: 1684},

					{year: 2017, name: '消防联网远程监控', value: 3521},
					{year: 2017, name: '电气火灾报警', value: 2587},
					{year: 2017, name: '烟感报警', value: 1584},

					{year: 2018, name: '消防联网远程监控', value: 5870},
					{year: 2018, name: '电气火灾报警', value: 4025},
					{year: 2018, name: '烟感报警', value: 3214},

					{year: 2019, name: '消防联网远程监控', value: 5014},
					{year: 2019, name: '电气火灾报警', value: 4521},
					{year: 2019, name: '烟感报警', value: 3584},

					{year: 2020, name: '消防联网远程监控', value: 6021},
					{year: 2020, name: '电气火灾报警', value: 5214},
					{year: 2020, name: '烟感报警', value: 4021},
				],
				data2: [
					{name: '消防联网远程监控', value: 5461},
					{name: '电气火灾报警', value: 6215},
					{name: '烟感报警', value: 6485},
					{name: '水位水压报警', value: 548},
					{name: '智能充电', value: 1654},
					{name: '消防通道管理', value: 6154},
				],
				data4: [
					{name: '低', value: 16517},
					{name: '中', value: 7512},
					{name: '高', value: 2488},
				]
			}
		},
		mounted() {
			this.render_chart1()
			this.render_chart2()
			this.render_chart3()
			this.render_chart4()
		},
		methods: {
			render_chart1() {
				const line = new this.$g2plot.Line(this.$refs.chart1, {
					data: this.data1,
					xField: 'year',
					yField: 'value',
					seriesField: 'name',
					label: true,
					point: {
						size: 5,
					},
				});
				line.render();
			},
			render_chart2() {
				const piePlot = new this.$g2plot.Pie(this.$refs.chart2, {
					data: this.data2,
					angleField: 'value',
					colorField: 'name',
					radius: 0.8,
					innerRadius: 0.64,
					legend: false,
					label: {
						type: 'outer',
						content: '{name} {percentage}',
					},
					statistic: {
						title: {
							offsetY: -10,
						},
						content: {
							offsetY: 10,
						},
					},
				});

				piePlot.render();

			},
			render_chart3() {
				const columnPlot = new this.$g2plot.Column(this.$refs.chart3, {
					data: this.data2,
					xField: 'name',
					yField: 'value',
					label: {
						position: 'top', // 'top', 'bottom', 'middle',
					},
					columnWidthRatio: .3,
				});

				columnPlot.render();

			},
			render_chart4() {
				const piePlot = new this.$g2plot.Pie(this.$refs.chart4, {
					data: this.data4,
					angleField: 'value',
					colorField: 'name',
					radius: 0.8,
					innerRadius: 0.64,
					legend: false,
					label: {
						type: 'outer',
						content: '{name} {percentage}',
					},
					statistic: {
						title: {
							offsetY: -10,
						},
						content: {
							offsetY: 10,
						},
					},
				});

				piePlot.render();

			},
		}
	}
</script>